<template>
	<view class="container">
		<view class="top_text">
			<image src="/static/image/Eite.png" class="eites" mode="aspectFit"></image>
			<textarea class="userInfoList" auto-height v-model="addUser" placeholder="请选择..."></textarea>
			<view class="imgAdd">
				<image src="/static/image/addImg.png" mode="aspectFit" @click="chooseClick"></image>
			</view>
			<view class="people" :class="{'share-show':isShow}">
				<view class="ctrec">选择收件人</view>
				<view class="peoSearch"><input v-model="user" @input="screenUser" placeholder="请输入..." /></view>
				<scroll-view scroll-y="true" class="choose_peo">
					<view v-for="(item,index) in arrayUser" :key="index" @click="toAddUsers(item)">
						<checkbox :checked="item.checked"/>
						<view>{{item.memberName}}/{{item.uniqueCode}}</view>
					</view>
				</scroll-view>
				<view class="allPeo" @click="allUserInfoChoose">{{allUser}}</view>
				<view class="cancels" @click="sure">确定</view>
				<view class="cancels" @click="cancels">取消</view>
			</view>
		</view>
		<view class="con_write_txt">
			<textarea class="write_txt" placeholder="编写内容...." v-model="content"></textarea>
			<view class="masking" @click="maskClick" v-show="isShow"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arrayUser: [],
				content: '',
				addUsers: [],
				addUser: '',
				user: '',
				userId: [],
				maps: '',
				allUser: '所有人',
				isShow: false,
				isImg: false,
				sponsorId: '',
				sponsorName: '',
				sentDate: ''
			}
		},
		onLoad() {
			this.getCurrentUserInfo();
			this.maps = new Map();
		},
		methods: {
			//发送请求
			async setUser() {
				this.getSentDateTime();
				if (this.userId == "") {
					uni.showLoading({
						title: '请选择接收人!',
						icon: 'none'
					})
					setTimeout(function() {
						uni.hideLoading();
					}, 1000);
				} else if (this.content == '') {
					uni.showLoading({
						title: '请输入想发送的内容!',
						icon: 'none'
					})
					setTimeout(function() {
						uni.hideLoading();
					}, 1000);
				} else {
					const res = await this
						.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
							url: '/api-operate/activecare/save',
							method: "post",
							data: {
								receiverId: this.userId,
								content: this.content,
								sponsorId: this.sponsorId,
								sponsorName: this.sponsorName,
								sentDate: this.sentDate
							}
						})
					if (res.success == true) {
						uni.showLoading({
							title: '提交成功',
							image: '/static/image/correct.png'
						})
						setTimeout(function() {
							uni.hideLoading();
							uni.navigateBack({
								url: 'pages/care/index'
							})
						}, 2000);
					} else {
						uni.showLoading({
							title: '提交失败',
							image: '/static/image/mistakes.png'
						})
						setTimeout(function() {
							uni.hideLoading();
						}, 2000);
					}
				}
			},
			//-----------------------------------------------
			//获取当前用户的id和名字
			getCurrentUserInfo() {
				this.sponsorId = uni.getStorageSync('id');
				this.sponsorName = uni.getStorageSync('loginName');
			},
			//--------------------------------------------
			//获取发送时间
			getSentDateTime() {
				var date = new Date();
				var year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				this.sentDate = timer;
			},
			//发送功能监听
			onNavigationBarButtonTap() {
				this.setUser();
			},
			//添加发送用户
			chooseClick() {
				this.isShow = true;
				this.screenUser();
			},
			//遮罩层
			maskClick() {
				this.isShow = false;
			},
			//艾特所有人
			allUserInfoChoose() {
				this.userId = [];
				this.addUsers = [];
				this.addUser = '所有人';
				for (let i in this.arrayUser) {
					this.userId.push(this.arrayUser[i].id)
				}
				this.isShow = false;
			},
			//确定
			sure() {
				this.isShow = false;
			},

			// 取消
			cancels() {
				this.isShow = false;
				this.addUsers = [];
				this.addUser = '';
				this.arrayUser = [];
				this.userId = [];
			},
			//-----------------------------------------------------------------
			//模糊搜索用户和获取信息数据列表
			async screenUser() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-operate/noSponsorMembers?memberName=' + this.user,
						method: "get",
					})
				if (res.success == true) {
					this.arrayUser = res.body.members;
					for (var i = 0; i < this.arrayUser.length; i++) {
						this.arrayUser[i].checked = false;
						if (this.userId.indexOf(this.arrayUser[i].id) > -1) {
							this.arrayUser[i].checked = true;
						}
					}
				}
			},

			//-------------------------------------------------------------------
			//添加选择的用户
			toAddUsers(item) {
				this.addUsers = [];
				this.userId = [];
				if (item.checked == false) {
					item.checked = true;
					this.maps.set(item.id, item.memberName);
				} else if (item.checked == true) {
					item.checked = false;
					this.maps.delete(item.id)
				}
				let _this = this;
				this.maps.forEach(function(value, key) {
					_this.addUsers.push(value);
					_this.userId.push(key);
				})
				this.addUser = this.addUsers.join(",");
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fdfdfd;
	}

	.container {
		width: 100%;
	}

	.top_text {
		width: 100%;
		display: flex;
		border-bottom: 1px solid #ebebeb;
		padding-left: 10%;
		position: relative;

		.eites {
			width: 40rpx;
			height: 40rpx;
			margin: 3.2% 0;
		}

		.userInfoList {
			width: 67%;
			padding: 0.5% 0 0.5% 2%;
			margin: 2%;
			border: 1px solid #a7a7a7;
			border-radius: 12px;
		}

		.imgAdd {
			width: 46rpx;
			height: 46rpx;
			margin: 2.5% 0;
			position: absolute;
			right: 14%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.people {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: 0 auto;
			width: 90%;
			border-radius: 12px;
			z-index: 999;
			transition: all 0 ease;
			transform: translateY(100%);

			view {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				// background-color: #007AFF;
				border-bottom: 1px solid #f1f1f1;
				text-align: center;
			}

			.ctrec {
				color: #757575;
				font-size: 28rpx;
				border-radius: 12px 12px 0 0;
				background-color: #ffffff;
			}

			.peoSearch {
				width: 100%;
				height: 70rpx;
				background-color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.choose_peo {
				width: 100%;
				height: calc(37vh);
				overflow: hidden;
				border-bottom: 1px solid #f1f1f1;
				background-color: #ffffff;
				text-align: center;
				border-radius: 0 0 12px 12px;
				color: #007bff;

				view {
					checkbox {
						width: 100%;
						position: absolute;
						left: 0;
						text-align: left;
						padding-left: 5%;
					}
				}

				view:last-child {
					border-bottom: none;
				}
			}

			.allPeo {
				margin: 0.6% 0;
				color: #ff0000;
				border: none;
				border-radius: 0 0 12px 12px;
				background-color: #ffffff;
			}

			.cancels {
				margin-top: 2%;
				color: #007bff;
				border: none;
				border-radius: 10px 10px 10px 10px;
				background-color: #ffffff;
			}
		}
	}

	.dead_end_user {
		width: 90%;
		height: calc(80vh);
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 1;
		// border: 1px solid #e2e2e2;
		// border-top: none;

		view {
			height: calc(6vh);
			line-height: calc(6vh);
			padding-left: 5.4%;
		}

		view:nth-child(even) {
			background-color: #ffff7f;
		}
	}

	.con_write_txt {
		width: 100%;
		height: calc(95vh);
		position: relative;

		.write_txt {
			width: 90%;
			margin: 0 auto;
			padding-top: 2%;
		}

		.masking {
			width: 100%;
			height: calc(95vh);
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 99;
			background-color: #000;
			opacity: 0.6;
		}
	}

	.share-show {
		transition: all 0.5s ease;
		transform: translateY(0%) !important;
	}
</style>
